<template>
  <div id="app">
    <Topbar :key="topbarKey"></Topbar>
    <Header></Header>
    <router-view />
    <!-- {{ isShowLoginModel }} -->
    <Footer></Footer>
    <Login v-show="isShowLoginModel"></Login>
    <!-- <i class="iconfont icon-loading"></i> -->
    <transition name="myToast">
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>
<script>
import Header from "@/components/Header.vue";
import Topbar from "@/components/Topbar.vue";
import Footer from "@/components/Footer.vue";
import Login from "@/components/Login.vue";
import Toast from "@/components/Toast.vue";
// import instance from '@/request/request'
import { JingPin } from "@/request/api";
import { mapState } from "vuex";
export default {
  data() {
    return { topbarKey: 0 };
  },
  computed: {
    ...mapState({
      isShowLoginModel: (state) => state.showModel.isShowLoginModel,
      isShowToast: (state) => state.showToast.isShowToast,
    }),
  },
  async created() {
    /**
     * 封装 axios：
     * 缺点1：每次请求都需要输入（请求域名地址），如果后端一改所有请求的组件都需要修改。
     * 解决:使用 request.js 封装 axios
     *
     * 缺点2：如果后端修改了（接口地址），所有组件都需要修改。
     * 解决：使用 api.js 统一管理接口地址
     *
     * 缺点3：如果有 token，每一次请求封装都需要（携带请求头代码）
     * 解决：使用axios中的拦截器，在请求拦截器中统一携带token
     *
     * 缺点4：如果项目中的请求顺序必须是先请求A完成，再继续B，现有方式（.then()）可能会出现（回调地狱）
     * 解决：使用async await 来解决，可以通过它实现（异步代码同步化）
     *      await 等待的是一个 promise 的结果
     *      await 它需要放在 async 修饰的函数内
     */
    /* // 2.1、
     instance.get('/products/recommend', {
      params: {
        ID: 12345
      }
    })
    .then(function (response) {
      console.log({response});
    })
    .catch(function (error) {
      console.log({error});
    }); */
    // 2.2、
    // console.log("解决缺点2：",JingPin());
    // 2.4.
    /* let res1=await JingPin();
    console.log({res1});

    const res2=await JingPin()
    console.log({res2});

    const res3=await JingPin()
    console.log({res3}); */
  },
  components: {
    Topbar,
    Header,
    Footer,
    Login,
    Toast,
  },
  //需求：手动删除token时，切换导航后更新登录状态。（模仿 token 过期）
  // 法二：
  watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        // console.log(newVal, oldVal);
        if (newVal == oldVal) return;
        // 减少重定向的组件重载
        if (oldVal != "/") {
          this.topbarKey++;
        }
      },
    },
  },
};
</script>
<style lang="less">
.myToast-enter,
.myToast-leave-to {
  opacity: 0;
}
.myToast-enter-active,
.myToast-leave-active {
  transition: opacity 0.5s linear;
}
.myToast-enter-to,
.myToast-leave {
  opacity: 1;
}
</style>
